<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>登录页面</title>
		<!-- <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> -->
		<link rel="stylesheet" href="../css/boxicons.min.css" />

		<link rel="stylesheet" href="../css/style.css">


		<script src="../js/vue.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/mycommon.js"></script>


	</head>
	<body>
		<div id="app">
			<form class="login-form">
				<h1 class="login-title">登录</h1>
				<div class="input-box">
					<i class='bx bxs-user'></i>
					<input type="text" v-model="formData.sysusername" placeholder="请输入账号">
				</div>
				<div class="input-box">
					<i class='bx bxs-lock-alt'></i>
					<input type="password" v-model="formData.sysuserpwd" placeholder="请输入密码">
				</div>

				<div class="remember-forgot-box">
					<label for="remember">
						<input type="checkbox" id="remember">
						记住我
					</label>
					<a href="#">忘记密码？</a>
				</div>

				<button class="login-btn" @click="submitForm" type="button">登录</button>

				<p class="register">
					没有账号？
					<a href="../yjw/zhuce.html">创建一个吧！</a>
				</p>
			</form>
		</div>


		<script>
			var vue = new Vue({
				el: "#app",
				data: {
					formData: {
						sysusername: undefined,
						sysuserpwd: undefined,
					}
				},
				methods: {
					submitForm() {
						var that = this;
						axios.post(HTTP + "user/uniLogin", this.formData)
							.then(function(res) {
								if (res.data.code === 200) {
									that.$alert('登录成功', '提示', {
										confirmButtonText: '确定',
										type: 'success',
										center: true // 中央显示
									}).then(() => {
										window.localStorage.setItem("jwtToken", res.data.jwtToken);
										window.location.href = "main.html";
									});
								} else {
									that.$alert('登录失败', '提示', {
										confirmButtonText: '确定',
										type: 'error',
										center: true // 中央显示
									});
								}
							})
							.catch(err => {
								console.log(err);
								that.$alert('请求失败', '提示', {
									confirmButtonText: '确定',
									type: 'error',
									center: true // 中央显示
								});
							});
					}
				}
			});
		</script>
	</body>
</html>